<template>
    <div class="box">
      <!-- 顶部 -->
      <van-cell-group>
        <van-cell title="购物车" value="编辑" />
      </van-cell-group>
    
  
      
      <!-- 二 -->
  
      <div v-for="(item, index) in Lists" :key="index">
        
        
        <van-swipe-cell >
          <!-- 复选框 -->
          <div class="box22"> <van-checkbox 
           :checked=item.goods_state ></van-checkbox></div>
    <van-card
      :num=item.goods_count
      :price=item.goods_price
      :desc=item.goods_name
    
      class="goods-card"
      :thumb=item.goods_img
    />
    <!-- 加减 -->
    <div class="box23"><van-stepper v-model="item.goods_count" /></div>
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
      </div>
      <!-- 全选三 -->
      <div class="box3">
        <van-submit-bar :price=num button-text="提交订单" @submit="onSubmit">
          <!-- v-model="checked" -->
          <van-checkbox v-model="checked">全选</van-checkbox>--- <span>{{leftCounts}}</span>
          <!-- <template #tip>
        你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
      </template> -->
      
        </van-submit-bar>
        
      </div>
  
      <!-- 底部 -->
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o" badge="5">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
      </van-tabbar>
    </div>
  </template>
  <script>
  import { getCart } from "../../http/api/cart";
  import {
    Tabbar,
    TabbarItem,
    SubmitBar,
    Toast,
    Cell,
    CellGroup,
    SwipeCell,
  } from "vant";
  import { createApp, ref ,computed,reactive} from "vue";
  export default {
    setup() {
      // let add =ref('https://www.escook.cn/vuebase/pics/2.png')
      let Lists = createApp();
      getCart("/cart").then((res) => {
        console.log(res.status);
        if (res.status == 200) {
          console.log(res.list, 1111);
          sessionStorage.setItem("carts", JSON.stringify(res.list));
        }
      });
      console.log(8888);
      Lists = JSON.parse(sessionStorage.getItem("carts"));
      console.log(Lists, 77777);
  
      // 二
      const checked = ref(false);
      const value = ref(1);

      // 全选三
      console.log(Lists, 888);
      const leftCounts = computed(()=>{
        return Lists.filter(item=>item.goods_state===true).length
      })
      
      
           const add = Lists.filter(item=>item.goods_state===true)
           console.log(add,444455);
           const addLists =  add.map(item=>{
           let  addList =0
           return   addList += item.goods_price
            
           })
           console.log(addLists,2255);
           let num = 0
        addLists.forEach(item=>{
            
            num = num +  item
           })
           num=num*100
           console.log(num,66999);
          
      
      // checked =isAll
      //  isAll = computed({
      //     get(){
      //       return Lists.every(item=>item.goods_state===true)
      //     },
      //     set(val){
      //       return Lists.forEach(item=>(item.goods_state=val))
      //     }
      // })
      
      const onSubmit = () => Toast("点击按钮");
      const onClickLink = () => Toast("修改地址");
  
      // 底部
      const active = ref("home");
  
      return {
        // add,
        Lists,
        //二
        checked,
        value,

  
        // 全选三
        onSubmit,
        onClickLink,
        leftCounts,
        // addLists,
        num,
        
        // allAdd,
        //底部
        active,
      };
    },
  };
  </script>
  <style lang="css">
  .box {
    height: 100%;
  }
.box22{
  
    position: fixed;
    left: 2px;
    top: 40px;
    z-index: 10000;
  }
  .box23{
   
   
    position: fixed;
    right: 47px;
    top: 60px;
    z-index: 10000;
  }
  .box3 {
    margin-bottom: 500px;
  }
  .van-submit-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: var(--van-submit-bar-z-index);
    width: 100%;
    background: var(--van-submit-bar-background-color);
    -webkit-user-select: none;
    user-select: none;
    margin-bottom: 50px;
  }
  
  .goods-card {
    margin: 0;
    /* background-color: @white; */
  }
  
  .delete-button {
    height: 100%;
  }
  :root{
    --van-padding-md: 26px;
  }
  </style>
  